require('../assets/css/slide-code-server.css');
import { getWindowWidthAndHeight } from '@/utils/utils';

Vue.component('slide-code-server', {
  name: 'slide-code-server',
  template: `<div id="puzzle" ref="puzzle">
    <div class="puzzle-container" v-show="isShow" :style="'top:'+ -(verHeight + 30) +'px;'">
      <div class="inner" :style="'width:'+ verWidth +'px;'">
        <div :style="'position:relative;width:' + verWidth + 'px;height:' + verHeight + 'px;'">
          <img id="scream" ref="scream" :src="verImg">
          <img id="screamVer" ref="screamVer" :src="verCodeImg" :style="'top:' + verifyY + 'px;'">
        </div>
        <p class="ver-tips" ref="verTips" :style="'bottom: ' + (displayTips ? 0 : -20 ) +'px;'">
          <template v-if="verification">
            <span style="color:#42ca6b;">验证通过</span><span></span>
          </template>
          <template v-if="!verification">
            <span style="color:red;">验证失败:</span>
            <span style="margin-left:4px;">拖动滑块将悬浮图像正确拼合</span>
          </template>
        </p>
      </div>
      <div v-show="isLoad" class="loading"><div class="u-icon-loading"></div></div>
    </div>
    <div class="slider-container" :style="'width:' + verWidth + 'px;'">
      <div class="slider-bar">
        <p class="slider-bar-text">按住滑块，拖动完成上方拼图</p>
      </div>
      <div class="slider-btn" ref="sliderBtn" @mousedown="startMove" @touchstart="startMove"></div>
    </div>
  </div>`,
  data () {
    return {
      moveStartX: '',
      displayTips: false,
      verification: false,
      verImg: '',
      verCodeImg: '',
      verWidth: 480,
      verHeight: 120,
      isSlideStop: false,
      isShow: false,
      isMove: false,
      isLoad: false,
      verifyY: 0,
      phone: ''
    }
  },
  methods: {
    refresh (type, phone) {
      const vm = this;

      var json = {
        params: {
          type: type,
          phone: phone || vm.phone,
          width: vm.verWidth,
          high: vm.verHeight
        },
        userInfo: vm.$parent.userInfo
      };

      vm.phone = json.params.phone;
      vm.isLoad = true;
      vm.AJAX('/eas/w/img/getVerify', json, function (data) {
        if (data.data) {
          vm.verImg = `data:image/jpeg;base64,${data.data.backSrc}`;
          vm.verCodeImg = `data:image/jpeg;base64,${data.data.outSrc}`;
          vm.verifyY = parseInt(data.data.high);
        }
      }, function () {
        vm.isLoad = false;
        vm.initSlider();
      }, true)
    },
    showError (type) {
      this.displayTips = true;
      this.verification = false;
      setTimeout(() => {
        this.displayTips = false;
        this.initSlider();
      }, 2000)
      setTimeout(() => {
        this.refresh(type)
      }, 1000)
    },
    showSuccess () {
      this.displayTips = true
      this.verification = true
    },
    initSlider () {
      this.$refs.screamVer.style.left = 0
      this.$refs.screamVer.style.transition = 'left 0.5s'
      this.$refs.sliderBtn.style.left = 0
      this.$refs.sliderBtn.style.transition = 'left 0.5s'
    },
    startMove (e) {
      e.stopPropagation();
      if (this.isSlideStop) return;

      this.isShow = true;
      this.isMove = true;
      e = e || window.event
      this.moveStartX = e.pageX || e.targetTouches[0].pageX;
      this.addMouseMoveListener();
      this.$refs.sliderBtn.style.transition = 'inherit';
      this.$refs.screamVer.style.transition = 'inherit';
    },
    moving (e) {
      e = e || window.event;
      e.preventDefault();

      let moveX = e.pageX || e.targetTouches[0].pageX
      let d = moveX - this.moveStartX
      let w = this.verWidth

      if (d < 0 || d > w - 45) {
        return ''
      }

      this.$refs.screamVer.style.left = d + 'px';
      this.$refs.sliderBtn.style.left = d + 'px';
    },
    moveEnd (e) {
      if (!this.isMove) return;

      e = e || window.event;
      let moveEnd_X = (e.pageX || e.changedTouches[0].pageX) - this.moveStartX;
      if (moveEnd_X > 30) {
        this.$emit('callback', moveEnd_X, this.verifyY)
      }

      this.moveStartX = 0;
      this.isMove = false;
    },
    addMouseMoveListener () {
      document.addEventListener('mousemove', this.moving)
      document.addEventListener('touchmove', this.moving)
      document.addEventListener('mouseup', this.moveEnd)
      document.addEventListener('touchend', this.moveEnd)
    }
  },
  mounted () {
    const { windowWidth } = getWindowWidthAndHeight();
    this.verWidth = parseInt(windowWidth * 0.92);
    this.verHeight = parseInt(this.verWidth * 0.25);
  },
  created () {
    const vm = this;

    document.attachEvent ? document.body.attachEvent("onclick", function (event) {
      vm.isShow = false;
      window.event.cacenlBubble = false;
    }) : document.body.addEventListener("click", function (event) {
      vm.isShow = false;
      event.stopPropagation();
    }, false);
  },
})